<!doctype html>
<html lang="en" id="friend_detail" v-cloak>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <title>爱的约定</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="lib/weui/dist/style/weui.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/friend_detail.css">
</head>
<body>
    <div class="common-header">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-left"></i>
            </a>
        </div>
        <div class="middle">会员详细</div>
    </div>

    <div class="user-basic">
        <div class="info">
            <img v-if="mainInfo.member.headImg.indexOf('upload')!=-1" :src="'http://appapp.b0.upaiyun.com' + mainInfo.member.headImg">
            <img v-if="mainInfo.member.headImg.indexOf('upload')==-1" :src="mainInfo.member.headImg">
            <!--<img class="rz" v-if="mainInfo.member.sfrz==1" src="img/rz.png" v-on:click="zrtx()">-->
            <p>{{mainInfo.member.nickName}}</p>
            <p>访问人气：{{mainInfo.rq[1]}}</p>
            <small>{{mainInfo.member.sexs}} {{mainInfo.member.age}}岁 {{mainInfo.member.address}} {{mainInfo.member.height}}cm</small>
            <p><img :src="picServer+'/www/images/hy'+mainInfo.member.hydj+'.png'" class="level"></p>
        </div>
        <div class="href">
            <div>
                <span>{{mainInfo.member.mood}}</span>
                <span>微博</span>
            </div>
            <div class="border">
                <span>{{mainInfo.member.buzz}}</span>
                <span>关注</span>
            </div>
            <div>
                <span>{{mainInfo.member.fans}}</span>
                <span>粉丝</span>
            </div>
        </div>
        <div class="href-bg"></div>
    </div>

    <div class="head">
        <i class="iconfont icon-heart-full orange"></i>
        <span>内心独白</span>
    </div>
    <p class="inner">{{mainInfo.member.monologue}}</p>


    <div class="head">
        <i class="iconfont icon-heart-full orange"></i>
        <span>个人标签</span>
    </div>
    <div class="tag">
        <span v-for="item in mainInfo.detail.labels.split(',')">{{item}}</span>
    </div>


    <div class="head" v-if="self.member.sfrz==1">
        <i class="iconfont icon-heart-full orange"></i>
        <span>视频</span>
        <span class="spangd" v-on:click="go('friendvideo.html?id='+mainInfo.member.id)">更多>></span>
    </div>
    
    <div class="video" v-if="self.member.sfrz==1">
        <ul class="clearfix">
            <li v-for="item in mainInfo.sp">
                <img :src="'http://appapp.b0.upaiyun.com'+item.annex.filePath1" alt="">
                <i class="iconfont icon-bofang"></i>
                <video width="100%" height="100%" :src="'http://appapp.b0.upaiyun.com'+item.annex.filePath1.substring(0,item.annex.filePath1.lastIndexOf('.'))+'.mp4'" preload="auto" controls="controls"></video>
            </li>
        </ul>
    </div>

    <div class="head" v-if="self.member.sfrz==1">
        <i class="iconfont icon-heart-full orange"></i>
        <span>照片</span>
        <span class="spangd" v-on:click="go('friendalbum.html?id='+mainInfo.member.id)">更多>></span>
    </div>

    <div class="photo" v-if="self.member.sfrz==1">
        <ul class="clearfix">
            <li v-for="item in mainInfo.zp" @click="preview(item.annex.filePath1)">
                <img :src="'http://appapp.b0.upaiyun.com'+item.annex.filePath1" alt="">
            </li>
        </ul>
    </div>

    <div class="head">
        <i class="iconfont icon-heart-full orange"></i>
        <span>基本资料</span>
    </div>
    <ul class="baseInfo">
        <li>身&nbsp;&nbsp;高<span>{{mainInfo.member.height}}</span></li>
        <li>体&nbsp;&nbsp;重<span>{{mainInfo.member.weight}}</span></li>
        <li>籍&nbsp;&nbsp;贯<span>{{mainInfo.member.nativePlaces}}</span></li>
        <li>月&nbsp;&nbsp;薪<span>{{mainInfo.member.moneys}}</span></li>
        <li>职&nbsp;&nbsp;业<span>{{mainInfo.member.zys}}</span></li>
        <li>学&nbsp;&nbsp;历<span>{{mainInfo.member.educations}}</span></li>
        <li>婚姻状况<span>{{mainInfo.member.marrys}}</span></li>
        <li>所在组织<span>{{mainInfo.member.cregion.name + mainInfo.member.xregion.name}}</span></li>
        <li>工作单位<span>{{mainInfo.member.company}}</span></li>
    </ul>

    <div class="head" v-if="self.member.sfrz==1">
        <i class="iconfont icon-heart-full orange"></i>
        <span>择友要求</span>
    </div>
    <ul v-if="self.member.sfrz==1" class="baseInfo">
        <li>籍&nbsp;&nbsp;贯<span>{{mainInfo.mate.places}}</span></li>
        <li>年龄范围<span>{{mainInfo.mate.ageBegin}}~{{mainInfo.mate.ageEnd}}</span></li>
        <li>身高范围<span>{{mainInfo.mate.heightBegin}}~{{mainInfo.mate.heightEnd}}cm</span></li>
        <li>婚史情况<span>{{mainInfo.mate.marryss}}</span></li>
        <li>学历要求<span>{{mainInfo.mate.educationss}}</span></li>
        <li>所在组织<span>{{mainInfo.mate.regions}}</span></li>
    </ul>

    <div class="head">
        <i class="iconfont icon-heart-full orange"></i>
        <span>详细资料</span>
    </div>
    <ul class="baseInfo">
        <li>民&nbsp;&nbsp;族<span>{{mainInfo.member.nations}}</span></li>
        <li>生&nbsp;&nbsp;肖<span>{{mainInfo.member.zodiacs}}</span></li>
        <li>星&nbsp;&nbsp;座<span>{{mainInfo.member.constellations}}</span></li>
        <li>血&nbsp;&nbsp;型<span>{{mainInfo.member.bloods}}</span></li>
        <li>有无子女<span>{{mainInfo.member.childrens}}</span></li>
        <li>购车情况<span>{{mainInfo.member.cars}}</span></li>
        <li>住房情况<span>{{mainInfo.member.rooms}}</span></li>
    </ul>

    <!--<div class="head" v-if="self.member.sfrz==1">
        <i class="iconfont icon-heart-full yellow"></i>
        <span>工作学习</span>
    </div>
    <ul v-if="self.member.sfrz==1">
        <li>单位名称<span>{{mainInfo.detail.company}}</span></li>
        <li>所学专业<span>{{mainInfo.detail.majors}}</span></li>
        <li>工作情况<span>{{mainInfo.detail.works}}</span></li>
        <li>单位类型<span>{{mainInfo.detail.companyTypes}}</span></li>
        <li>语言能力<span>{{mainInfo.detail.languages}}</span></li>
    </ul>-->

    <!--<div class="head" v-if="self.member.sfrz==1">
        <i class="iconfont icon-heart-full yellow"></i>
        <span>生活描述</span>
    </div>
    <ul v-if="self.member.sfrz==1">
        <li>家中排行<span>{{mainInfo.detail.homeRanks}}</span></li>
        <li>工作情况<span>{{mainInfo.detail.maxConsumers}}</span></li>
        <li>是否吸烟<span>{{mainInfo.detail.smokings}}</span></li>
        <li>宗教信仰<span>{{mainInfo.detail.Faiths}}</span></li>
        <li>锻炼习惯<span>{{mainInfo.detail.sports}}</span></li>
        <li>是否喝酒<span>{{mainInfo.detail.drinks}}</span></li>
        <li>作息习惯<span>{{mainInfo.detail.rests}}</span></li>
        <li>喜欢制造浪漫<span>{{mainInfo.detail.romantics}}</span></li>
        <li>是否要孩子<span>{{mainInfo.detail.Childs}}</span></li>
        <li>是否愿意与对方父母同住<span>{{mainInfo.detail.lives}}</span></li>
        <li>生活技能<span>{{mainInfo.detail.lifeSkillss}}</span></li>
    </ul>-->

    <div class="head" v-if="self.member.sfrz==1">
        <i class="iconfont icon-heart-full orange"></i>
        <span>兴趣爱好</span>
    </div>
    <ul v-if="self.member.sfrz==1" class="baseInfo">
        <li>运&nbsp;&nbsp;动<span>{{mainInfo.detail.motions}}</span></li>
        <li>食物<span>{{mainInfo.detail.foods}}</span></li>
        <li>书籍<span>{{mainInfo.detail.books}}</span></li>
        <li>电影<span>{{mainInfo.detail.movies}}</span></li>
        <li>业余爱好<span>{{mainInfo.detail.hobbys}}</span></li>
        <li>旅游<span>{{mainInfo.detail.tourisms}}</span></li>
        <li>关注的节目<span>{{mainInfo.detail.programs}}</span></li>
        <li>娱乐新鲜<span>{{mainInfo.detail.amuses}}</span></li>
        <li>个人标签<span>{{mainInfo.detail.labels}}</span></li>
    </ul>

    <div class="head" v-if="self.member.sfrz==1">
        <i class="iconfont icon-heart-full orange"></i>
        <span>性格相貌</span>
    </div>
    <ul v-if="self.member.sfrz==1" class="baseInfo">
        <li>个性描述<span>{{mainInfo.detail.personalitys}}</span></li>
        <li>体&nbsp;&nbsp;形<span>{{mainInfo.detail.shapes}}</span></li>
        <li>魅力部位<span>{{mainInfo.detail.charms}}</span></li>
        <li>发&nbsp;&nbsp;型<span>{{mainInfo.detail.hairStyles}}</span></li>
        <li>发&nbsp;&nbsp;色<span>{{mainInfo.detail.hairColors}}</span></li>
        <li>脸&nbsp;&nbsp;型<span>{{mainInfo.detail.faces}}</span></li>
    </ul>

    <div class='bottom'>
        <a @click="sayhi(mainInfo.member.id)" href="javascript:;" class='btn'>
            <i class='iconfont icon-chat'></i>
            <span>打招呼</span>
        </a>
         <a href="javascript:;" class='btn' @click="sendMsgDialog(mainInfo.member.id)">
            <i class='iconfont icon-open-mail'></i>
            <span>发留言</span>
        </a>
         <a @click="attention(mainInfo.member.id)" href="javascript:;" class='btn focus' v-if="mainInfo.member.sfgz==0">
            <i class='iconfont icon-star'></i>
            <span>关注</span>
        </a>
         <a @click="noAttention(mainInfo.member.id)" href="javascript:;" class='btn focus focused' v-if="mainInfo.member.sfgz==1">
            <i class='iconfont icon-star'></i>
            <span>取消关注</span>
        </a>
    </div>

    <div class="modal" id="greet" v-if="msgDialog">
        <div class="main">
            <i @click="switchSayhi()" class="iconfont icon-x"></i>
            <div class="content">
                <div v-for="msg in msgList" 
                     :class=" {'cur':selectMsgIndex==$index }"
                     @click="selectMsgFn($index,msg.content)">
                    {{msg.content}}
                </div>
            </div>
            <div class="modal-footer">
                <a @click="exchangeMsg()" href="javascript:;">换一组</a>
                <a @click="submitMsg()" href="javascript:;">打招呼</a>
            </div>
        </div>
    </div>

    <!-- 发消息 -->
    <div class='modal' id='letter' v-if="showSendMsg">
        <div class='main'>
            <i @click="sendMsgDialog()" class='iconfont icon-x'></i>
            <div class='content'>
                <!-- <h2>在这里写信件内容</h2> -->
                <div class='controls'>
                    <span>内容</span>
                    <textarea v-model="msgContent"></textarea>
                </div>
                <p>
                    您可以免费给TA写信件，对方也可以免费看信，建议互相熟悉后再交换联系方式，禁止发送不良信息，否则账号一律查封。
                </p>
            </div>
            <div class='modal-footer'>
                <a @click="sendMsgDialog()" href="javascript:;">取消</a>
                <a @click="sendMsg(msgContent)" href="javascript:;">发留言</a>
            </div>
        </div>
    </div>

    <div class="preview-img" v-if="previewImg">
        <i class="iconfont icon-tubiao06" v-on:click="closeImg()"></i>
        <img :src="previewImg" alt="">
    </div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>var app = 'friend_detail';</script>
<script data-main="js/common/require_config" src="lib/requirejs/require.js"></script>
</html>